
<template>
  <div>
    <div v-if="loading" class="flex justify-center items-center h-64">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
    </div>

    <div v-else-if="module" class="max-w-4xl mx-auto">
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex items-center mb-4">
          <div class="w-16 h-16 bg-primary rounded-lg flex items-center justify-center">
            <i :class="`fas ${module.icon} text-white text-2xl`"></i>
          </div>
          <div class="ml-4">
            <h1 class="text-2xl font-bold text-gray-900">{{ module.name }}</h1>
            <p class="text-gray-600">{{ module.description }}</p>
          </div>
        </div>
        
        <div class="mb-4">
          <span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">
            难度: {{ module.difficulty }}
          </span>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">代码编辑器</h2>
        <div class="border rounded-lg">
          <textarea 
            v-model="code" 
            class="w-full h-64 p-4 font-mono text-sm"
            placeholder="在此输入你的代码..."
          ></textarea>
        </div>
        
        <div class="mt-4 flex space-x-4">
          <button 
            @click="runCode"
            :disabled="running"
            class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 disabled:opacity-50"
          >
            {{ running ? '运行中...' : '运行代码' }}
          </button>
          
          <button 
            @click="submitCode"
            :disabled="submitting"
            class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 disabled:opacity-50"
          >
            {{ submitting ? '提交中...' : '提交答案' }}
          </button>
        </div>
      </div>

      <div v-if="result" class="bg-white rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold mb-2">运行结果</h3>
        <pre class="bg-gray-100 p-4 rounded-md text-sm overflow-x-auto">{{ result }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

export default {
  name: 'Module',
  setup() {
    const route = useRoute()
    const module = ref(null)
    const code = ref('')
    const result = ref('')
    const loading = ref(true)
    const running = ref(false)
    const submitting = ref(false)

    const fetchModule = async () => {
      try {
        const response = await axios.get(`/api/modules/${route.params.id}`)
        module.value = response.data
        code.value = response.data.codeTemplate || ''
      } catch (error) {
        console.error('获取模块失败:', error)
      } finally {
        loading.value = false
      }
    }

    const runCode = async () => {
      running.value = true
      try {
        // 这里可以集成代码执行服务
        result.value = '代码执行功能开发中...\n\n你的代码:\n' + code.value
      } catch (error) {
        result.value = '执行失败: ' + error.message
      } finally {
        running.value = false
      }
    }

    const submitCode = async () => {
      submitting.value = true
      try {
        const linesOfCode = code.value.split('\n').length
        await axios.post('/api/practice-records', {
          moduleId: module.value.id,
          codeContent: code.value,
          linesOfCode: linesOfCode,
          isCompleted: true
        })
        alert('提交成功！')
      } catch (error) {
        console.error('提交失败:', error)
      } finally {
        submitting.value = false
      }
    }

    onMounted(() => {
      fetchModule()
    })

    return {
      module,
      code,
      result,
      loading,
      running,
      submitting,
      runCode,
      submitCode
    }
  }
}
</script>
